<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聊天室登录页面</title>
    <meta name="description"
          content="The ultimate Bootstrap based Messaging framework to help build Messaging or Chat application fast and easy. Fully responsive and crafted with modern elements and latest design">
    <meta name="keywords" content="Chatriq, chat, messaging, theme, platform"/>
    <meta name="subject" content="">
    <meta name="copyright" content="">
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon"/>

    <link rel="stylesheet" type="text/css" href="dist/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendors/material-floating-button/dist/mfb.min.css">
    <link rel="stylesheet" type="text/css" href="dist/css/app.css">
    <link rel="stylesheet" type="text/css" href="dist/css/theme/default-theme.css">
</head>
<body class="default-theme">


<!-- main wrapper start -->
<div class="main-wrapper">
    <div class="chatapp">
        <!-- navbar start -->
        <nav id="navbar" class="navbar navbar-expand-md navbar-light fixed-top bg-white border-bottom shadow-sm">
            <a class="navbar-brand" href="index.html">
                <img src="assets/images/logo.svg" width="50" height="50" class="d-inline-block align-top" alt="">
                <h1>欢迎来到聊天室（Netty版）</h1>
            </a>
        </nav>
        <!-- navbar end -->

        <!-- sidebar start -->
        <div class="chatapp__sidebar">
            <ul class="nav" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link">
                        <i class="mdi mdi-message-text-outline"></i><span>闲聊广场</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">
                        <i class="mdi mdi-phone-outline"></i><span>私聊</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link">
                        <i class="mdi mdi-account-box-outline"></i><span>通讯录</span>
                    </a>
                </li>
            </ul>
        </div>
        <!-- sidebar end -->

        <!-- main content start -->
        <div class="chatapp__content">
            <div class="taskmanager-wrapper">
                <div class="container-fluid">
                    <div class="row pt-3 mb-5">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-12">
                            <div class="taskpanel-title" style="font-size: 250%">登录表单</div>
                            <div class="taskpanel" id="inProcessTask" style="padding-top: 10%">
                                <div class="taskcard">
                                    <div class="card">
                                        <div class="card-body">
                                            <form action="/user/login" method="post">
                                                <!--开启spring security的csrf保护-->
                                                <!--<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>-->
                                                <div class="taskname" style="font-size: 170%;margin-bottom: 2%">聊天昵称
                                                </div>
                                                <input type="text" class="form-control" placeholder="请输入昵称..."
                                                       name="username" id="userName" autofocus>

                                                <div class="taskname"
                                                     style="font-size: 170%;margin-bottom: 2%;margin-top: 5%">登陆密码
                                                </div>
                                                <input type="text" class="form-control" name="password"
                                                       placeholder="请输入密码..." id="password" autofocus>
                                                <br>
                                                <div style="font-size: 140%;margin-bottom: 5%">
                                                    <input type="checkbox" name="remember-me">记住密码
                                                </div>
                                                <div style="text-align: center">
                                                    <button class="btn btn-primary" type="submit" id="login"
                                                            style="font-size: 200%;margin-right: 6%">GO!!!
                                                    </button>
                                                </div>

                                            </form>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-12">
                            <div class="taskpanel-title" style="font-size: 250%">注册表单</div>
                            <div class="taskpanel" style="padding-top: 10%">
                                <div class="taskcard">
                                    <div class="card">
                                        <div class="card-body">
                                            <formlll>
                                                <!--开启spring security的csrf保护-->
                                                <!--<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>-->
                                                <div class="taskname" style="font-size: 170%;margin-bottom: 2%">聊天昵称
                                                </div>
                                                <input type="text" class="form-control" placeholder="请输入昵称..."
                                                       name="username" id="userName0" autofocus>

                                                <div class="taskname"
                                                     style="font-size: 170%;margin-bottom: 2%;margin-top: 5%">登陆密码
                                                </div>
                                                <input type="text" class="form-control" name="password"
                                                       placeholder="请输入密码..." id="password0" autofocus>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <div style="text-align: center">
                                                    <button class="btn btn-primary" id="register"
                                                            style="font-size: 200%;margin-right: 6%">注册
                                                    </button>
                                                </div>

                                            </formlll>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- main content end -->
    </div>
</div>


<!-- Javascripts Files -->
<script src="dist/js/popper.min.js"></script>
<script src="assets/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/vendors/shortable/sortable.min.js"></script>
<script src="dist/js/jquery-3.4.1.min.js"></script>
<script src="dist/js/layer/layer.js"></script>
<script type="text/javascript">


    $(function () {

        //弹出是个登陆好的页面
        /*
        $("#test").click(function () {
            var username = "test";
            for (var i = 1; i <= 4; i++) {
                username += i;
                $.post("/user/login", {"username": username, "password": "123"}, function (result) {
                });
                username = "test";
            }
            layer.msg("四个测试用户登陆完成，请依次点击打开用户首页...")
        });


        $(".openTest").click(function () {
            var id = $(this).attr("id");
            var username = "test" + id;
            var host = window.location.host;
            window.open("http://" + host + "/index.html?test=" + username)
        })
        */

        $("#register").click(function () {

            var userName = $("#userName0").val();
            var password = $("#password0").val();
            $.post("register",{"userName":userName,"password":password},function (resultEntity) {
                if(resultEntity.resultFlag==true){
                    layer.msg("注册成功，请登录...");
                    $("#userName0").val("");
                    $("#password0").val("");
                }else {
                    layer.msg("用户昵称已存在，请更换昵称...");
                }
            });
        });


    })


</script>
</body>
</html>
